<template>
    <el-select
        v-model="form[formId]"
        :multiple="multiple"
        collapse-tags
        @change="selectAll"
        :placeholder="$t('m.placeholder.selectAccount')"
        filterable
        :clearable="clearable"
        :size="size"
        :disabled="disabled"
    >
        <allAddDelSelect
            v-if="multiple"
            :selectForm="form"
            :selectArray="account"
            :selectFormId="formId"
            selectArrayId="brandId"
            :size="addSize"
            @selectAll="selectAll"
            @selectDel="selectDel"
        ></allAddDelSelect>
        <el-option
            v-for="item in account"
            :key="item.brandId"
            :label="item.brandName"
            :value="item.brandId"
        ></el-option>
    </el-select>
</template>
<script>
import { Account } from "./http";
const ERR_OK = 200;
export default {
    props: {
        form: Object,
        addSize: String,
        size: String,
        formId: String,
        multiple: Boolean,
        disabled: Boolean,
        clearable:{
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            account: []
        };
    },
    created() {
        this.getAccount();
    },
    methods: {
        getAccount() {
            Account().then(res => {
                if (res.data.code === ERR_OK) {
                    this.account = res.data.data.Brand;
                }
            });
        },
        selectAll() {
            this.$emit("selectAll", this.account);
        },
        selectDel() {
            this.$emit("selectDel", this.account);
        }
    },
    components: {
        allAddDelSelect: resolve =>
            require(["components/searchfor/allAddDelSelect.vue"], resolve)
    }
};
</script>